<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }

        .aui-tab-item.aui-active {
            font-weight: bold;
            border-bottom: .1rem solid #E94B41;
            color: #333;
            font-size: .7rem;
        }

        .aui-tab-item {
            height: 1.7rem;
            line-height: 1.6rem
        }

        .order-item {
            padding: 0 .6rem;
            margin: .6rem;
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff
        }

        .red-line {
            height: .1rem;
            width: 1.4rem;
            background: #E93324;
            margin: 0 auto;
        }

        .tap-block-title {
            height: 1.6rem;
            color: #333
        }

        .tap-grey-title {
            height: 1.6rem;
            color: #999
        }
    </style>
</head>

<body>
    <div id="app">
        <section class="aui-content">
            <div class="aui-tab font-14">
                <div class="aui-tab-item" v-for='item in taps' tapmode @click='tapSelected(item.tapId)' :data-tapId='item.tapId'>
                    <div :class="[tapIndex == item.tapId ?'tap-block-title':'tap-grey-title']">{{item.tap}}</div>
                    <div :class="[ tapIndex == item.tapId ? 'red-line' : '' ]">
                    </div>
                </div>
            </div>
        </section>
        <section class="font-14 text-color-3">
            <div v-for='(order,orderIndex) in data'>
                <div class="order-item white-bg-radius" tapmode @click='toOrderDetail'>
                    <div class="height-44 flex-justify-between">
                        <div class="flex-align-center">
                            <img class='img-18' src="../image/index/logo1.png" alt="" style="margin-right:0.3rem">
                            <span class="font-semibold">{{order.storeName}}</span>
                        </div>
                        <div class="font-12 red-text">{{order.orderCnStatus}}</div>
                    </div>
                    <div class="flex-justify-between" style="height:1.85rem">
                        <div class="font-semibold">
                            {{order.list[0].goodsName}}
                        </div>
                        <div class="font-12">¥<span class="font-17">29</span></div>
                    </div>
                    <div class="btns" v-show='opertionBtns[order.orderStatus].length != 0'>
                        <button type="button" name="button" v-for='opertionBtns[order.orderStatus]' :data-id='item.name' :data-order='order' :data-shopIndex='orderIndex' tapmode @click='opertionTap(order,id,shopIndex)'>取消订单</button>
                        <!-- <button type="button" name="button">立即付款</button> -->
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
    //订单详情 状态 99-全部 0-已取消 1-待付款 2-待发货 3-待收货 4-已关闭 5-已完成 88-待评价
    var vm = new Vue({
        el: '#app',
        data: {
            taps: [{
                tap: '全部',
                tapId: 0
            }, {
                tap: '待付款',
                tapId: 1
            }, {
                tap: '待提货',
                tapId: 2
            }, {
                tap: '已完成',
                tapId: 3
            }],
            tapIndex: 0,
            curPage: 1,
            pageSize: 6,
            hasMore: true,
            data: [],
            curOrder: {}, //按钮操作的当前id
            curOrderIndex: 0, //当前订单的索引
            operType: 0, //1 :取消订单  2:删除订单
            //操作按钮
            opertionBtns: {
                0: [{
                    name: '再来一单',
                    color: 'red'
                }],
                1: [{
                    name: '取消订单',
                    color: 'gray'
                }, {
                    name: '立即付款',
                    color: 'red'
                }],
                2: [{
                    name: '再来一单',
                    color: 'red'
                }],
                3: [{
                    name: '再来一单',
                    color: 'red'
                }],
                4: [{
                    name: '再来一单',
                    color: 'red'
                }],
                5: [{
                    name: '再来一单',
                    color: 'red'
                }],
                //待自提
                98: [{
                    name: '再来一单',
                    color: 'red'
                }],
                //已自提
                97: [{
                    name: '再来一单',
                    color: 'red'
                }],
                //已退款
                96: [{
                    name: '再来一单',
                    color: 'red'
                }]
            },

        },
        methods: {
            tapSelected: function(tapId) {
                this.tapIndex = tapId;
                this.refreshData()
            },

            refreshData: function() {
                this.hasMore = true;
                this.queryOrderList(1, this.pageSize)
            },
            queryOrderList: function(page, pageSize) {
                let that = this;
                let orderStatus = this.tapIndex;
                api.ajax({
                    url: 'https://hhppapi.hoshiibuy.com/store/getNearestStore',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    data: {
                        body: {
                            pageNumber: page,
                            pageSize: that.pageSize,
                            shippingStatus: orderStatus,
                            spuId: 0,
                            userId: 0
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        that.querySuccess(ret, page)
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                });
            },
            querySuccess: function(ret, curPage) {
                let that = this;
                for (let i = 0; i < ret.records.length; i++) {
                    ret.records[i] = this.formatOrderStatus(ret.records[i])
                    ret.records[i].orderCnStatus = '订单' + ret.records[i].orderCnStatus;
                    if (ret.records[i].orderStatus === 98 && ret.records[i].payStatus === 1 &&
                        ret.records[i].payTime && ret.records[i].list && ret.records[i].list.length > 0 &&
                        ret.records[i].list[0].receiptInterval) {
                        ret.records[i].orderCnStatus = '预计' + this.formatDate(ret.records[i].deliveryTime) + "可提货"
                    }
                    ret.records[i].store = {
                        storeName: ret.records[i].storeName,
                        address: ret.records[i].address
                    }
                }
                let records = ret.records;
                let maxPage = parseInt(res.pages);
                var datas = curPage == 1 ? [] : this.data;
                if (records) {
                    datas = datas.concat(records);
                }
                that.hasMore = maxPage > curPage;
                that.data = datas;
                that.curPage = curPage;
            },

            //按钮操作
            opertionTap: function(order, id, shopIndex) {
                let opertionBtns = this.opertionBtns;
                this.curOrder = order;
                this.curOrderIndex = shopIndex;
                switch (id) {
                    case '取消订单':
                        this.operType = 1;
                        this.confirm(this.operType)
                        break;
                    case '删除订单':
                        this.operType = 2;
                        this.confirm(this.operType)
                        break;
                    case '立即付款':
                        api.openFrame({
                            name: 'pay-modal',
                            url: './modal/pay-modal.html',
                            bounces: true,
                            rect: {
                                x: 0,
                                y: 0,
                                w: api.winWidth,
                                h: api.winHeight
                            },
                            bgColor: 'rgba(0,0,0,0.6)',
                            bounces: false
                        });
                        break;
                    case '再来一单':
                        this.operType = 2
                        api.openFrame({
                            name: 'index_win',
                            url: './index_win.html',
                            bounces: true,
                            rect: {
                                x: 0,
                                y: 0,
                                w: api.winWidth,
                                h: api.winHeight
                            },
                            bgColor: 'rgba(0,0,0,0.6)',
                            bounces: false
                        });
                    default:

                }
            },
            confirm: function(operType) {
                let curOrder = this.curOrder;
                if (operType == 1) {
                    api.confirm({
                        title: '提示',
                        msg: '确定要删除此订单吗?',
                        buttons: ['确定', '取消']
                    }, function(ret, err) {
                        if (ret) {
                            api.ajax({
                                url: 'https://hhppapi.hoshiibuy.com/order/delete/orderId=curOrder.orderId',
                                method: 'delete',
                                data: {}
                            }, function(ret, err) {
                                if (ret) {
                                    alert(JSON.stringify(ret));
                                } else {
                                    alert(JSON.stringify(err));
                                }
                            });

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                }else {
                  api.confirm({
                      title: '提示',
                      msg: '确定要取消此订单吗?',
                      buttons: ['确定', '取消']
                  }, function(ret, err) {
                      if (ret) {
                          api.ajax({
                              url: 'https://hhppapi.hoshiibuy.com/order/cancel/orderId=curOrder.orderId',
                              method: 'delete',
                              data: {}
                          }, function(ret, err) {
                              if (ret) {
                                  alert(JSON.stringify(ret));
                              } else {
                                  alert(JSON.stringify(err));
                              }
                          });
                      } else {
                          alert(JSON.stringify(err));
                      }
                  });
                }
            },
            formatOrderStatus: function() {
                const formatOrderStatus = order => {
                    if (order.orderStatus === 1) {
                        order.orderStatus = 0;
                        order.orderCnStatus = "已取消";
                    } else if (order.orderStatus === 0) {
                        order.orderStatus = 1;
                        order.orderCnStatus = "待付款";
                    } else if (order.orderStatus === 5) {
                        order.orderStatus = 98;
                        order.orderCnStatus = "待提货";
                    } else if (order.orderStatus === 9) {
                        order.orderStatus = 97;
                        order.orderCnStatus = "已提货";
                    } else if (order.orderStatus === 8) {
                        order.orderStatus = 96;
                        order.orderCnStatus = "已关闭";
                    }
                    return order;
                }
            },
            // 时间戳转为普通日期格式(时间戳格式必须被整型)
            formatDate: function(time) {
                var mydate = new Date(time);
                var hour = mydate.getHours();
                hour = hour < 10 ? ("0" + hour) : hour;
                var minute = mydate.getMinutes();
                minute = minute < 10 ? ("0" + minute) : minute;
                var second = mydate.getSeconds();
                second = second < 10 ? ("0" + second) : second;
                return hour + ":" + minute + ":" + second;
            },
            toOrderDetail: function() {
                api.openFrame({
                    name: 'order-detail_win',
                    url: './order-detail_win.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    },
                    pageParam: {
                        orderId: this.data.orderId
                    },
                })



            }
        }

    });

    apiready = function() {

    }
</script>


</html>
